<template>
    <div class="person">
        <h1>情况1：监视【ref】定义的【基本类型】数据</h1>
        <h2>当前数字值：{{ num }}</h2>
        <button @click="addNum">点我数字+1</button>
        <br>
        <h1>情况2：监视【ref】定义的【对象类型】数据</h1>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">换人</button>
        <br>
        <h1>情况3：监视【reactive】定义的【对象类型】数据</h1>
        <h2>姓名：{{ person1.name }}</h2>
        <h2>年龄：{{ person1.age }}</h2>
        <button @click="changeName1">修改名字</button>
        <button @click="changeAge1">修改年龄</button>
        <button @click="changePerson1">换人</button>
    </div>
</template>


<script lang="ts" setup name="Person">
    
    import {ref, watch, reactive} from 'vue'

    // 监视情况1：ref定义的基本数据类型
    let num = ref(0)

    const stopWatch = watch(num, (newValue, olderValue)=> {
        console.log('原值：' + olderValue + ', 当前值：' + newValue)
        if (newValue >= 10) {
            // 可以使用watch的返回函数停止监视
            stopWatch()
        }
    })

    function addNum() {
        num.value += 1
    }


    // 监视情况2: ref定义的对象数据类型
    let person = ref({name : '张三', age : 18})

    function changeName() {
        person.value.name += '~'
    }

    function changeAge() {
        person.value.age += 1
    }

    function changePerson() {
        person.value = {name : '李四', age : 30}
    }

    watch(person, (newValue, olderValue)=> {
        // 如果不开深度监视，那么监视不到对象内某个值的变化，只能监控到指向地址的变化
        console.log('person变化了：', newValue, olderValue)
    }, 
    // watch的第三个参数：配置项
    // deep:是否开启深度监视(开启后可以监视到对象内的数据)
    // immediate:在初始化时调用watch函数
    {deep:true, immediate:true})


    // 监视情况3: reactive定义的对象数据类型
    let person1 = reactive({name : '张三', age : 18})

    function changeName1() {
        person1.name += '~'
    }

    function changeAge1() {
        person1.age += 1
    }

    function changePerson1() {
        Object.assign(person1, {name : '李四', age : 30})
    }

    // recative默认开启了深度监视，且无法关闭
    watch(person1, (newValue, olderValue)=> {
        // 这里newValue和olderValue打印的值相同，因为地址没变
        console.log('person变化了：', newValue, olderValue)
    })

</script>


<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>